{% extends 'base.html' %}

{% load humanize %}

{% block extra_head %}
<meta name="google-site-verification" content="QH9Q9s-Ew8ffsQxInPK5LSpSOEAzwGKQV4K-j5bRiE8" />
<title>{{env_blog.name}}</title>
<script type='text/javascript'>
    no_sidebar  = true;
</script>
<style type='text/css'>
    #index_main{
        float:left;
       /* border-right:1px dashed #BA2636;*/
        width:650px;
        overflow:hidden;
    }
    #index_main img{
        max-width:650px;
    }
    #index_side{
        float:left;
        padding-left:1em;
        padding:10px 0 10px 10px;
        width:260px;
    }
    #main_content div.left{
        padding:0;
        width:920px;
    }
    #new_archives{
        position:relative;
        padding-left:30px;
        /*border-bottom:1px solid #BA2636;
        border-right:1px solid #BA2636;*/
        float:left;
        width:300px;
    }
    #top_archives{
        position:relative;
        padding-left:30px;
        float:left;
    }
    #new_archives p.para{
        height:40px;
        overflow:hidden;
    }
    #top_archives h4 a,
    #new_archives h4 a{
        color:#BA2636;
    }
    #top_archives h4 a:hover,
    #new_archives h4 a:hover{
        color:green;
    }
    p.info{
        font-size:11px;
        color:gray;
    }
    #main_content #new_archives h2,
    #main_content #top_archives h2{
        position:absolute;
        width:15px;
        background-color:#BA2636;
        color:white;
        font-weight:normal;
        font-size:13px;
        padding:0 3px;
        left:0;
        top:1px;
    }
    #all_list{
        margin-top:1em;
    }
    #all_list h3{
        color:#BA2636;
        color:#000;
        border-bottom:1px solid #ccc;
    }
    #all_list h4{
        font-weight:normal;
    }
    #all_list h4 a{
        color:#ba2636;
    }
    .category{
        width:190px;
        float:left;
        margin:0 1em 5px 0;
        background-color:#eee;
        border:1px solid #ccc;
        padding:5px;
    }
    .category h3.revers{
    }
    #index_side .author{
       /* border-bottom:1px dashed silver;*/
        padding-bottom:10px;
    }
    #index_side .author img{
        float:left;
        margin-right:5px;
    }
    #index_side .author p{
        margin-left:105px;
    }
    h4 a:hover{
        color:green;
        /*text-decoration:underline;*/
    }
    #preview .archive h4{
        font-size:15px;
    }
    #preview .archive{
        margin-bottom:1em;
    }
    #preview .archive .para{
        border-left:3px solid rgb(247,247,247);
        border-left:3px solid #BA2636;
        padding-left:1em;
        /*color:indianRed;*/
    }
    #preview .displaycode{
    }
    table.dir{
        background-color:#eeeeee;
        padding-bottom:10px;
        border:1px solid #cccccc;
        font-size:12px;
    }
    #mblogs table{
        color:#BA2636;
        background-color:white;
        border:none;
        border-right:1px solid silver;
    }
    table.mblog{
        background-color:#9fd8ef;
        border:1px solid #9fe8ef;
        margin-right:10px;
    }
    table.dir li{
        margin:2px 0px;
    }
    table.dir a{
        color:#BA2636;
    }
    table.dir a:visited{
        color:#BA2636;
    }
    table.dir a:hover{
        color:green;
    }
    #updates li{
        list-style:square inside;
        color:green;
        margin-bottom:1em;
    }
    #updates li p{
        margin-left:1em;
        color:gray;
    }
    .mblog{
    }
    .mblog .content{
        color:green;
        margin-left:135px;
    }
    .mblog .info{
        text-align:right;
        color:gray;
    }
    .mblog .author{
        /*color:teal;*/
    }
    #comments .content{
        border-left:3px solid #BA2636;
        padding-left:8px;
    }
    #comments .author{
        color:gray;
    }
</style>
{% endblock %}

{% block content %}

<div id='index_main'>
<div id='new_archives'>
    <h2>最新文章</h2>
    {% for archive in new_archives %}
    <h4><a href='{{archive.get_absolute_url}}'>{{archive.title}}</a></h4>
    <p class='info'>{{archive.pub_date|naturalday}} {{archive.pub_date|date:"H:i"}}     评论-{{archive.comments.count}} </p>
    {% endfor %}
</div>
<div id='top_archives'>
    <h2>热门文章</h2>
    {% for archive in top_archives %}
    <h4><a href='{{archive.get_absolute_url}}'>{{archive.title}}</a></h4>
        <p class='info'>{{archive.pub_date|naturalday}} {{archive.pub_date|date:"H:i"}} 浏览-{{archive.view_nums}} 评论-{{archive.comments.count}}</p>
   
    {% endfor %}
</div>

<div class='clear'></div>

<div id='mblogs'>
    <h2 class='dot'><span>微博更新</span></h2>
    <table class='dir' align="left" border="0" cellspacing="0" cellpadding="0" width='120'>
        <tbody>
            <tr>
                <td width='10'></td>
                <td> 
                    <img src='{{env_author.avatar}}' width='90' height='90' alt='Avatar'/>
                    <p>{{mblog_count}} 个更新</p>
                    <p>{{mblog_comment_count}} 个回复</p>
                    <a href='/mblogs'>查看全部</a>
                </td>
            </tr>
        </tbody>
    </table>
    {% for mblog in new_mblogs %}
    <div class='mblog'> 
        <p class='content'>{{mblog.content}}</p>
        <div class='info'>
            <span class='author'>{{env_author.name}}</span><span> -- {{mblog.pub_date|naturalday}} {{mblog.pub_date|date:"H:i"}}</span>
        </div>
    </div>
    {% endfor %}
</div>
<div class='clear'></div>
<div id='preview'>
    <h2 class='dot'><span>最新发布</span></h2>
    <table class='dir' align="right" border="0" cellspacing="0" cellpadding="0" width='30%'>
        <tbody>
            <tr>
                <td width='10'></td>
                <td bgcolor='#eeeeee'>
                    <h4>预览目录</h4>
                <ul>
                {% for archive in new_archives %}
                <li><a href='#archive_{{archive.key.id}}'>{{archive.title}}</a></li>
                {% endfor %}
                </ul>
                </td>
            </tr>
        </tbody>
    </table>
    {% for archive in new_archives %}
        <div class='archive'>
            <h4><a id='archive_{{archive.key.id}}' href='{{archive.get_absolute_url}}'>{{archive.title}}</a></h4>
        <p class='info'>{{archive.pub_date|naturalday}} {{archive.pub_date|date:"H:i"}} 浏览-{{archive.view_nums}} 评论-{{archive.comments.count}}</p>
        <div class='para'>
            {% autoescape off %}
            {{archive.content|striptags|slice:":200"|linebreaks}}
            {% autoescape on %}
            {% endautoescape %}
            {% endautoescape %}
        </div>
    </div><!-- .archive -->
    {% endfor %}
</div>
<div id='all_list'>
    <h2 class='dot'><span>全部分类</span></h2>
    {% for category in categories %}
    <div class='category'>
        <h3 class='revers'><span>{{category.name}}</span></h3>
        {% for archive in category.query_news|slice:":5" %}
        <h4><a href='{{archive.get_absolute_url}}'>{{archive.title}}</a></h4>
        <!--
        <p class='info'>
        {{archive.pub_date|naturalday}}
        {{archive.pub_date|date:"H:i"}}
        <a href='{{archive.get_absolute_url}}#comments'>评论</a>-
        {{archive.comments.count}}</p>
        -->
        {% endfor %}
        <p><a href='{{category.get_absolute_url}}'>--More--</a></p>
    </div>
    {% endfor %}
</div><!-- #all_list -->
</div><!-- #index_main -->
<div id='index_side'>
    <div class='author'>
    <img src='{{env_author.avatar}}' alt='avatar' width='100' />
    <h3>{{env_author.name}}</h3>
    <p class=''>{{env_author.description|linebreaks}}</p>
    <div class='clear'></div>
    </div>
    <div id='rss'>
        <h3 class='dot'><span>订阅</span></h3>
        <a href="{{env_blog.rss}}"><img border="0" src="http://img.feedsky.com/images/icon_sub_c1s14.gif" alt="feedsky" vspace="2"  style="margin-bottom:3px" ></a><br />

    <link title="RSS 2.0" type="application/rss+xml" href="{{env_blog.rss}}" rel="alternate" />

    <a href="http://www.zhuaxia.com/add_channel.php?url={{env_blog.rss}}" target="_blank"><img border="0" src="http://img.feedsky.com/images/icon_subshot02_zhuaxia.gif" alt="&#25235;&#34430;" vspace="2" style="margin-bottom:3px" ></a>
    <a href="http://fusion.google.com/add?feedurl={{env_blog.rss}}" target="_blank"><img border="0" src="http://img.feedsky.com/images/icon_subshot02_google.gif" alt="google reader" vspace="2" style="margin-bottom:3px" ></a>
    <a href="http://www.xianguo.com/subscribe.php?url={{env_blog.rss}}" target="_blank"><img border="0" src="http://img.feedsky.com/images/icon_subshot02_xianguo.gif" alt="&#40092;&#26524;" vspace="2" style="margin-bottom:3px" ></a>
    <a href="http://inezha.com/add?url={{env_blog.rss}}" target="_blank"><img border="0" src="http://img.feedsky.com/images/icon_subshot02_nazha.gif" alt="&#21738;&#21522;" vspace="2" style="margin-bottom:3px" ></a>
    <a href="http://reader.youdao.com/b.do?keyfrom=feedsky&url={{env_blog.rss}}" target="_blank"><img border="0" src="http://img.feedsky.com/images/icon_subshot02_youdao.gif" alt="&#26377;&#36947;" vspace="2" style="margin-bottom:3px" ></a>
    <a href="http://mail.qq.com/cgi-bin/feed?u={{env_blog.rss}}" target="_blank"><img border="0" src="http://img.feedsky.com/images/icon_subshot02_qq.gif" alt="QQ&#37038;&#31665;" vspace="2" style="margin-bottom:3px" ></a>
    <a href="http://9.douban.com/reader/subscribe?url={{env_blog.rss}}" target="_blank"><img border="0" src="http://img.feedsky.com/images/icon_subshot02_douban.gif" alt="&#20061;&#28857;" vspace="2" style="margin-bottom:3px" ></a>
        
    </div>
    <div id='customize'>
        {% autoescape off%}
        {{ env_blog.sidebar }}
        {% autoescape on%}
        {% endautoescape %}
        {% endautoescape %}
    </div>
    <div id='comments'>
        <h3 class='dot'><span>最新评论</span></h3>
        {% for comment in new_comments %}
        <div class='comment'>
            <p class='content'>{{comment.content}}</p>
            <span class='author'>{{comment.name}}</span> - 
            <a href='{{comment.archive.get_absolute_url}}#comment_{{comment.key.id}}'>{{comment.archive.title}}</a>
        </div>
        {% endfor %}
    </div>
    <div id='updates'>
        <h3 class='dot'><span>最近更新</span></h3>
        <div>
            <ul>
                <li>10.31 添加微博相关功能
                    <p>正在完善中</p>
                </li>
                <li>10.24 鼠标手势添加左右键功能
                    <p>左键为上一篇文章，右为下一篇（时间排序）</p>
                </li>
                <li>10.23 添加鼠标手势
                    <p>IE8，FireFox，Chrome下测试成功</p>
                </li>
                <li>10.19 手机WAP可浏览
                    <p>手机可以浏览主页，分类，文章，进行评论</p>
                    <p>直接访问本主页既可自动调整到WAP首页</p>
                </li>
            </ul>
        </div>
    </div><!-- #updates -->
<!--<img src='/static/mozilla.gif' width='120' alt='mozilla'/>-->
<!--
<h3 class='dot'><span>还在使用IE?</span></h3>
<img src='/static/firefox-ie.jpg' width='220' alt='firefox-ie' />
<a href='http://www.mozillaonline.com/'>点击下载FireFox</a>
-->
</div><!-- #index_side -->
{% endblock %}

